<template>
<div class="userInfo">
  <!--header start-->
  <header class="header-con header-w-bg">
    <router-link to='/setting'>
      <a>
        <i class="back-icon"></i>
      </a>
    </router-link>
    <h1 class="header-tit">个人资料</h1>
  </header>
  <!--header end-->
  <!-- content start -->
  <div class="my-page">
    <div class="myData-progress">
      <h2>已完成<span>20%</span>，加把劲！</h2>
      <div><span style="width: 30%;"></span></div>
      <p>完善个人信息即获200积分，填写旅游偏好再获300积分哦~</p>
    </div>
    <div class="myData">
      <ul class="myData-list">
        <li class="myData-avatar flex-box avatar-box">
          <label class="avatar-tit">头像</label>
          <div class="list-flex">
            <div class="avatar-img"><img  :src='userInfo.content.imageUrl' alt=""></div>
          </div>
          <i class="right-icon"></i>
        </li>
        <li>
          <router-link :to="userInfo.content.userAccount ? '/setting/userInfo/userAccountUpdate/'+userInfo.content.userAccount : '#'" class="flex-box">
            <label>用户账号</label>
            <div class="list-flex">
              <input type="text" placeholder="账号保存后不可修改，可用做登录" readonly :value='userInfo.content.userAccount'>
            </div>
            <i class="right-icon"></i>
          </router-link>
        </li>
        <li>
          <router-link :to="'/setting/userInfo/nickNameUpdate/'+userInfo.content.nickName" class="flex-box">
            <label>用户昵称</label>
            <div class="list-flex">
              <input type="text" placeholder="请输入用户昵称" readonly :value='userInfo.content.nickName'>
            </div>
            <i class="right-icon"></i>
          </router-link>
        </li>
      </ul>
      <ul class="myData-list">
        <li><router-link :to="'/setting/userInfo/actualNameUpdate/'+userInfo.content.userSurName+'/'+userInfo.content.userName" class="flex-box">
          <label>真实姓名</label>
          <div class="list-flex">
            <input type="text" placeholder="请输入您的真实姓名" :value="userInfo.content.userSurName+userInfo.content.userName" readonly>
          </div>
          <i class="right-icon"></i>
        </router-link></li>
        <li>
          <router-link :to="'/setting/userInfo/idCardNoUpdate/'+userInfo.content.idCardNo" class="flex-box">
            <label>身份证号</label>
            <div class="list-flex">
              <input type="text" placeholder="请输入您的身份证号码" :value='userInfo.content.idCardNo' readonly>
            </div>
            <i class="right-icon"></i>
          </router-link>
        </li>
        <li>
          <router-link :to="'/setting/userInfo/emailUpdate/'+userInfo.content.email" class="flex-box">
            <label>电子邮箱</label>
            <div class="list-flex">
              <input type="text" placeholder="请输入您的邮箱" readonly :value="userInfo.content.email">
            </div>
            <i class="right-icon"></i>
          </router-link>
        </li>
      </ul>
      <ul class="myData-list" v-show='userInfo.content.hasUserAccount'>
        <li><router-link to="/setting/userInfo/hobbyUpdate" class="flex-box">
          <label>旅游偏好</label>
          <div class="list-flex">
            <span class="text-tip">{{userInfo.content.hobbycontent}}</span>
          </div>
          <i class="right-icon"></i>
        </router-link></li>
      </ul>
    </div>
  </div>
  <!-- content end -->
  <!---->
  <div class="avatar-set">
  </div>
</div>
</template>

<script>
  import axios from 'axios'
  import common from '../../../assets/js/common'
  import qs from 'qs'
  import weui from 'weui.js'

  export default {
    data () {
      return {
        userInfo: {
          'resultCode': '',
          'resultMsg': '',
          'content': {
            'address': null,
            'content': '',
            'email': null,
            'hasHobby': true,
            'hasUserAccount': true,
            'hobbycontent': '',
            'id': '',
            'idCardNo': null,
            'imageUrl': '',
            'mobileNo': '',
            'nickName': null,
            'userAccount': null,
            'userId': '',
            'userName': '',
            'userSurName': ''
          },
          'accessToken': null
        }
      }
    },
    created: function () {
      let self = this
      // let userId = common.userid
      let config = {
        headers: {
          'access-token': common.accesstoken,
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }
      let data = qs.stringify({})
      self.getUserInfo(data, config)
    },
    methods: {
      getUserInfo: function (data, config) {
        let queryUrl = common.api.memberCenter.getUserInfo
        var self = this
        let loading = weui.loading('加载中')

        axios.post(queryUrl, data, config).then(function (res) {
          if (res.data.resultMsg === 'success') {
            self.userInfo = res.data
            // console.log(self.userInfo, '=======')
            console.log(res.data)
            loading.hide()
          } else {
            loading.hide()
            weui.toast('请求失败')
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  @import '../../../assets/sass/setting/userInfo';
</style>
